<template>
  <div class="tradeRecord">
    <assets-head :title="$t('交易记录')" />
    <div class="content">
      <van-tabs v-model="active" class="w-full px-32 box-border" sticky @click="changeType">
        <van-tab :title="$t('当前委托')" class="font-30">
          <div class="all-select flex justify-end">
            <div class="select-box flex" @click.stop="isAll = !isAll">
              <div class="flex-1">
                {{ symbol.toUpperCase() }}/USDT
              </div>
              <van-icon name="arrow-down" />
              <div class="select-data" v-if="isAll">
                <div class="select-item" @click.stop="selectItem(item)" v-for="(item, index) in currencyList"
                  :key="index">{{ item.symbol.toUpperCase() }}/USDT</div>
              </div>
            </div>
          </div>
          <entrust-item v-for="item in entrustList" :key="item.order_no" :entrust="item" :state="item.state"
            @cancelOrder="cancelOrder" />
        </van-tab>
        <van-tab :title="$t('历史委托')">
          <div class="all-select flex justify-end">
            <div class="select-box flex" @click.stop="isAll = !isAll">
              <div class="flex-1">
                {{ symbol.toUpperCase() }}/USDT
              </div>
              <van-icon name="arrow-down" />
              <div class="select-data" v-if="isAll">
                <div class="select-item" @click.stop="selectItem(item)" v-for="(item, index) in currencyList"
                  :key="index">{{ item.symbol.toUpperCase() }}/USDT</div>
              </div>
            </div>
          </div>
          <entrust-item v-for="item in entrustList" :key="item.order_no" :entrust="item" :state="item.state"
            @cancelOrder="cancelOrder" />
        </van-tab>
        <van-tab :title="$t('成交历史')" class="font-30">
          <div class="all-select flex justify-end">
            <div class="select-box flex" @click.stop="isAll = !isAll">
              <div class="flex-1">
                {{ symbol.toUpperCase() }}/USDT
              </div>
              <van-icon name="arrow-down" />
              <div class="select-data" v-if="isAll">
                <div class="select-item" @click.stop="selectItem(item)" v-for="(item, index) in currencyList"
                  :key="index">{{ item.symbol.toUpperCase() }}/USDT</div>
              </div>
            </div>
          </div>
          <entrust-item v-for="item in entrustList" :key="item.order_no" :entrust="item" :state="item.state"
            @cancelOrder="cancelOrder" />
        </van-tab>
      </van-tabs>
      <div v-if="!entrustList.length" class="flex flex-col justify-center items-center pt-185">
        <img src="@/assets/image/assets-center/no-data.png" alt="no-date" class="w-180 h-180" />
        <p class="textColor">{{ $t('暂无数据') }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import { Tabs, Tab } from 'vant';
import EntrustItem from '@/components/entrust-item'
import TradeApi from "@/API/trading.js";
import { _getCoins, _getHomeList } from '@/API/home.api'
export default {
  props: {

  },
  components: {
    assetsHead,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    EntrustItem
  },
  data() {
    return {
      active: 0,
      entrustList: [],
      historyList: [],
      finishList: [],
      type: 'orders',
      isAll: false,
      symbol: '',
      currencyList: [],
      coinPrice: 0
    }
  },
  mounted() {
    this.getCoins()
    this.symbol = this.$route.params.symbol
    this.getOrderList(this.type)
    this.getCoinPrce(this.symbol)
  },
  methods: {
    getCoins() {
      _getCoins().then((res) => {
        console.log(res)
        this.currencyList = res
      })
    },
    getCoinPrce(val) {
      _getHomeList(val).then((res) => {
        this.coinPrice = res[0].close
      })
    },
    getOrderList(type) {
      TradeApi.tradeRecord({
        page_no: 1,
        symbol: this.symbol,
        type: type
      }).then(res => {
        this.entrustList = res.data;
      }).catch(() => {

      })
    },
    changeType() {
      this.entrustList = [];
      if (this.active == 0) {
        this.type = 'orders'
      } else if (this.active == 1) {
        this.type = 'hisorders'
      } else {
        this.type = 'opponent'
      }
      this.getOrderList(this.type);
    },
    cancelOrder(order) {
      TradeApi.tradeCancel({
        order_no: order,
      }).then(res => {
        this.$toast(this.$t('成功'));
        this.getOrderList(this.type)
      }).catch(() => {

      })
    },
    //选择币种
    selectItem(item) {
      this.symbol = item.symbol
      this.getOrderList(this.type)
      this.getCoinPrce(item.symbol)
      this.isAll = false
    },
  }
}
</script>

<style lang="scss" scoped>
.tradeRecord {
  width: 100%;
  box-sizing: border-box;

  ::v-deep .van-tab {
    color: $text_color1;
  }

  ::v-deep .van-tabs__nav {
    background: $tab_background;
  }

  ::v-deep .van-tab--active {
    color: $text_color;
  }
}

.listItem {
  border-bottom: 1px solid #EAEBEE;
  display: flex;
  justify-content: space-between;
}

.all-select {
  padding: 30px 0;

  .select-box {
    width: 160px;
    height: 50px;
    background: $main_background;
    color: $text_color;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding: 0 20px;
    position: relative;

    .select-data {
      position: absolute;
      top: 55px;
      left: 0;
      z-index: 10;
      width: 100%;
      height: 300px;
      overflow-y: auto;
      background: $main_background;
      border: 1px solid $text_color;


      .select-item {
        padding: 20px 20px;
        text-align: center;
        border-bottom: 1px solid $border_color;
      }
    }
  }
}</style>
